<style lang="scss">
.design {
  background-color: #171b22;
  --c-color: rgba(255, 255, 255, 0.3);
  --bg-color: #171b22;
}

.playground {
  --x-w: 20px;
  --y-w: 20px;
  position: relative;
  //height: 900px;
  //height: calc(var(--y-w) * 50);
  //width:  calc(var(--x-w) * 50);
  //background: linear-gradient(-90deg, var(--c-color) 1px, transparent 1px) 0% 0% / var(--x-w) var(--y-w), linear-gradient(var(--c-color) 1px, transparent 1px) 0% 0% / var(--x-w) var(--y-w);
  //padding-block: calc(2rem + max(var(--ruler1-h), var(--ruler2-h)));

  border-left: 1px solid var(--c-color);
}

.playground-bg {
  position: relative;
  box-sizing: border-box;

  //padding: calc(1rem + max(var(--ruler1-h), var(--ruler2-h)));
  //padding: 5px;
  //padding-right: 0;
  //padding-bottom: 0;

  background-image: linear-gradient(90deg, var(--ruler1-c) 0, var(--ruler1-bdw), transparent 0), linear-gradient(90deg, var(--ruler2-c) 0, var(--ruler2-bdw), transparent 0), linear-gradient(0deg, var(--ruler1-c) 0, var(--ruler1-bdw), transparent 0), linear-gradient(0deg, var(--ruler2-c) 0, var(--ruler2-bdw), transparent 0);
  background-position: 0 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
      calc(var(--ruler-unit) * var(--ruler1-space) * var(--ruler-x)) var(--ruler1-h),
      calc(var(--ruler-unit) * var(--ruler2-space) * var(--ruler-x)) var(--ruler2-h),
      var(--ruler1-h) calc(var(--ruler-unit) * var(--ruler1-space) * var(--ruler-y)),
      var(--ruler2-h) calc(var(--ruler-unit) * var(--ruler2-space) * var(--ruler-y));


}

.drag-page {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

body {

  --ruler-num-c: #888;
  --ruler-num-fz: 10px;
  --ruler-num-pi: 0.75ch;
  --ruler-unit: 1px;
  --ruler-x: 1;
  --ruler-y: 1;

  --ruler1-bdw: 1px;
  --ruler1-c:  #efefef;
  --ruler1-h: 8px;
  --ruler1-space: 5;

  --ruler2-bdw: 1px;
  --ruler2-c:  #efefef;
  --ruler2-h: 30px;
  --ruler2-space: 50;
}

/* Ruler Numbers */
.ruler-x,
.ruler-y {
  color: var(--ruler-num-c);
  counter-reset: d 0;
  display: flex;
  font-size: var(--ruler-num-fz);
  line-height: 1;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.ruler-x {
  height: var(--ruler2-h);
  inset-block-start: 0;
  inset-inline-start: calc(var(--ruler-unit) * var(--ruler2-space));
  opacity: var(--ruler-x);
  //width: 100%;
  width: calc(100% - var(--ruler-unit) * var(--ruler1-space) * var(--ruler-x) * 10);
}
.ruler-y {
  flex-direction: column;
  //height: 100%;
  height: calc(100% - var(--ruler-unit) * var(--ruler1-space) * var(--ruler-y) * 10);
  inset-block-start: calc(var(--ruler-unit) * var(--ruler2-space));
  inset-inline-start: 0;
  opacity: var(--ruler-y);
  width: var(--ruler2-h);
}
.ruler-x li {
  align-self: flex-end;
}
.ruler-x li,
.ruler-y li {
  counter-increment: d var(--ruler2-space);
  flex: 0 0 calc(var(--ruler-unit) * var(--ruler2-space));
}
.ruler-x li::after {
  content: counter(d)"";
  line-height: 1;
  padding-inline-start: var(--ruler-num-pi);
}
.ruler-y li::after {
  content: counter(d)"";
  display: block;
  padding-inline-end: var(--ruler-num-pi);
  transform: rotate(-90deg) translateY(-15px);
  transform-origin: 100% 0%;
  text-align: end;
  width: 100%;
}

.obj-prop {
  color: #fff;
  padding: 20px 10px;
  .el-form-item__label {
    color: #fff;
  }
  .z-form__prop {
    width: 100%;
  }
}


.list-img {
  width: 200px;
}

.list-item {
  //width: max-content;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.echarts {
  height: 100%;
  > div:first-child {
    width: 100%;
  }
}

.drag-com-select {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, -120%);
  color: #fff;
}

.preview-dialog {
  .el-dialog__body {
    padding: 0;
  }
}

[data-activated] {
  background-color: #3ba2f4;
}

</style>

<template>
<div>
  <zw-row style="grid-template-columns: 1fr 150px">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
      <el-submenu index="1">
        <template slot="title">图表</template>
        <el-menu-item  v-for="(group, key) in groups" :key="group.key">
          <el-submenu :index="group.key" >
            <template slot="title">{{group.label}}</template>
            <div style="padding: 10px;">
              <zw-row style="grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;" >
                <img class="list-img"
                     v-for="item in group.children" :key="item.id"
                     @click="appendItem(item, group)"
                     :src="item.style.backgroundImage"
                >
              </zw-row>

            </div>
          </el-submenu>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">组件</template>
        <el-menu-item  v-for="(group, key) in data_coms" :key="group.key">
          <el-submenu :index="group.key" >
            <template slot="title">{{group.label}}</template>
            <div style="padding: 10px;">
              <zw-row style="grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;" >
                <img class="list-img"
                     v-for="item in group.children" :key="item.id"
                     @click="appendItem(item, group)"
                     :src="item.style.backgroundImage"
                >
              </zw-row>

            </div>
          </el-submenu>
        </el-menu-item>
      </el-submenu>
      <!--    <el-submenu index="3">-->
      <!--      <template slot="title">二级</template>-->
      <!--      <el-menu-item  v-for="(group, key) in con_coms" :key="group.key">-->
      <!--        <el-submenu :index="group.key" >-->
      <!--          <template slot="title">{{group.label}}</template>-->
      <!--          <div style="padding: 10px;">-->
      <!--            <zw-row style="grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;" >-->
      <!--              <img class="list-img"-->
      <!--                   v-for="item in group.children" :key="item.id"-->
      <!--                   @click="appendItem(item, group)"-->
      <!--                   :src="item.style.backgroundImage"-->
      <!--              >-->
      <!--            </zw-row>-->

      <!--          </div>-->
      <!--        </el-submenu>-->
      <!--      </el-menu-item>-->
      <!--    </el-submenu>-->
    </el-menu>

    <z-space >
      <el-button @click="preview">预览</el-button>
    </z-space>
  </zw-row>

  <zw-row class="design" style="width: 100%;"
          :style="{'grid-template-columns': editorSize}" gap="10px">
    <div
        class="obj-list"
        style="color: #fff; box-sizing: border-box; overflow: hidden">
      <div style=" padding: 0 10px;">
        <h3>图层</h3>
        <!--    <z-chart style="width: 100%" :option="groups.line[0].widgetConfig.option"></z-chart>-->

        <!--      <div v-for="(group, key) in groups" :key="key">-->
        <div class="list-item"
             :data-activated="current && (item.id === current.id)"
             v-for="item in data" :key="item.id">
          <zw-layout row style="justify-content: space-between; align-items: center; width: 100%"

          >
            <div>{{item.data.label ? item.data.label : '元素'}}</div>
            <div @click="deleteItem(item)"><i class="el-icon-delete"></i></div>
          </zw-layout>

        </div>
        <!--      </div>-->

      </div>
    </div>
    <div class="playground-bg">
      <ul class="ruler-x">
        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      </ul>
      <ul class="ruler-y">
        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      </ul>

      <div class="playground" :style="playgroundStyle">


        <div class="drag-page">
          <z-draggable-resizable
              :z="item.data.ZINDEX"
              :parent="true"

              :snap="true" :snap-tolerance="20"
             v-for="item in data" :key="item.id"
             :draggable="item.data.draggable"
             @refLineParams="getRefLineParams"
             :w="item.data.com_w" :h="item.data.com_h"
             @resizing="(l, t, x,y)=>{drag__collect(item, x, y, l, t)}"
              @dragging="(l,t)=>{drag__move(item, l,t)}"
             @click.native="onClickCom(item)"
              v-click-outside="onClickOutSide"
          >
            <div class="drag-com-select"
                 v-if="item.data.container"
                 @click="selectContainer(item)"
            ><i class="el-icon-ice-drink"></i></div>
<!--            <div style="color: #fff">{{item.data.ZINDEX}}</div>-->
            <z-drag-render :ref="item.id" :item="item"></z-drag-render>
          </z-draggable-resizable>
        </div>



        <span class="ref-line v-line"
              v-for="item in vLine"
              v-show="item.display"
              :style="{ left: item.position, top: item.origin, height: item.lineLength}"
        />
        <span class="ref-line h-line"
              v-for="item in hLine"
              v-show="item.display"
              :style="{ top: item.position, left: item.origin, width: item.lineLength}"
        />
      </div>
    </div>

    <div class="obj-prop">
      <template v-if="current && current.data">
        <z-space vertical>
          <z-space vertical><div>长度:</div>
            <el-input-number v-model="current.data.w"
                      @change="prop__onChangeSize(current, 'com_w', $event)"
            ></el-input-number>
          </z-space>
          <z-space vertical><div>高度:</div>
            <el-input-number v-model="current.data.h"
                      @change="prop__onChangeSize(current, 'com_h', $event)"
            ></el-input-number>
          </z-space>
          <z-space vertical><div>ZINDEX:</div>
            <el-input-number v-model="current.data.ZINDEX"
                      @change="prop__onChangeSize(current, 'ZINDEX', $event, false)"
            ></el-input-number>
          </z-space>
        </z-space>
        <z-form-template
            v-if="current.data.formDef"
            :inline="true"
            :label-inline="false"
            :def="current.data.formDef"
            ref="searchForm"
            @fire="prop__onFire"
            @model-change="prop_onModelChange"
            @ready="prop__onFormReady"
        >
        </z-form-template>
<!--        {{current.data.widgetConfig}}-->
      </template>
    </div>
  </zw-row>
</div>
</template>
<script>
import ZVideoPlayer from "@/zpkgs/components/z-video-player/ZVideoPlayer";
CustomCusComponent.registerOnce(ZVideoPlayer)

import ZDragRichText from './components/ZDragRichText'
CustomCusComponent.registerOnce(ZDragRichText)

import ZDragContainer from "./components/ZDragContainer";
CustomCusComponent.registerOnce(ZDragContainer);

import ZDragPreview from "./components/ZDragPreview";
CustomCusComponent.registerOnce(ZDragPreview);

import ZDragRender from "./components/ZDragRender";

import groups from './data'
import {data_coms, con_coms} from "./com";


//颜色对象
function Color(){
   let r = Math.floor(Math.random()*255);
   let g = Math.floor(Math.random()*255);
   let b = Math.floor(Math.random()*255);
  return 'rgba('+ r +','+ g +','+ b +',0.8)';
}

import {INIT_HEIGHT, INIT_WIDTH, PLAYGROUND_HEIGHT, PLAYGROUND_WIDTH} from "@example/views/drag/const";
import {createDraggableItem, dragCommonMixin} from "@example/views/drag/utils";

let editorSizeMap = {
  // def: '240px 1fr 340px',

  def: '240px 1000px 340px',
  noMenu: '0 1000px 340px'
}

export default {
  components: {ZDragRender},
  mixins: [
      dragCommonMixin
  ],
  data() {
    let obj = {
      vLine: [],
      hLine: [],
      data: [],
      groups,
      data_coms,
      con_coms,
      activeIndex: '',
      INIT_WIDTH,
      INIT_HEIGHT,
      ZINDEX: 0,
      playgroundStyle: {
        width: PLAYGROUND_WIDTH + 'px',
        height: PLAYGROUND_HEIGHT + 'px'
      },
      current: {
        item: {}
      },
      editor: {
        type: 'def',
      },
      curCon: null
    }
    return obj
  },
  computed: {
    editorSize() {
      return editorSizeMap[this.editor.type]
    }
  },
  mounted() {
    let self = this;
    globalThis.$desginer = {
      setCurrent(item) {
        console.log('setCurrent', item)
        self.onClickCom(item)
      }
    }
  },
  methods: {
    appendItem(item) {
      if (this?.curCon?.com) {
        this.curCon.com.appendItem(item)
        return;
      }
      this.data.push(createDraggableItem(item, {
        ZINDEX: this.ZINDEX + 1,
      }));
      this.ZINDEX = this.ZINDEX + 1
    },
    deleteItem(item) {
      this.$confirm('确定删除吗').then(() => {
        let index = this.data.findIndex(v => v.id === item.id);
        if (index > -1) {
          console.log('deleteItem', item, index);
          this.data.splice(index, 1)
        }
      })
    },

    getRefLineParams (params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    },
    handleSelect(e) {
      console.log(e)
    },
    selectContainer(item) {
      item.data.selected = !item.data.selected
      if ( item.data.selected) {
        this.curCon = {
          ref: this.$refs[item.id]
        }
        if (this.$refs[item.id]) {
          this.curCon.com = this.$refs[item.id][0].getCom()
        }
        // console.log(  this.curCon)
      } else {
        this.curCon = null
      }
    },
    // 处理 onClickCom
    onClickCom(item) {
      // console.log('onClickCom', item)
      this.current  = {
        id: item.id,
        data: item.data
      }
      this.data.forEach(v => {
        item.activated = false
        if (v.id === item.id) {
          item.activated = true
        }
      })
    },
    onClickOutSide() {
      // console.log('onClickOutSide')
      // if (this.current) {
      //   this.current = {}
      // }
    },
    prop__onChangeSize(current, key, newVal, reload = true) {
      current.data[key] = newVal;
      if (reload) {
        this.reloadItem(current)
      }
      // console.log('prop__onChangeSize',current, key, newVal )
    },
    prop__onFormReady(e) {
      console.log('prop__onFormReady', e)
      e.form.importData(this.current.data.widgetConfig)
    },
    prop_onModelChange(e, def) {
      let properties = ZY.lodash.get(def, 'def.properties', {})
      let config = ZY.lodash.get(properties, e.s_path)
      let  widget = ''
      if (config) {
        widget = ZY.lodash.get(config, 'ui.widget')
      }
      // console.log(e, config, widget)
      if (widget !== 'CusInput') {
        this.current.data.widgetConfig[e.s_path] = e.e;
      }
      // this.reloadItem
    },
    prop__onFire(args) {
      console.log('prop__onFire', args)
      if (args[0] === 'com:blur') {
        // let n = args[1]
        // let model = n.scope.curFormCon.getRawModel()
        // let k = n.scope.self_path
        //
        // this.current.data.widgetConfig[k] = model[k];
        // console.log(model)
      }
      if (args[0] === 'com:change') {
        let n = args[1]
        let k = n.scope.self_path;
        this.current.data.widgetConfig[k] = n.e;
        // this.reloadItem(current)
        // console.log('prop__onFire', args)
      }
    },
    preview() {
      // console.log('preview')

      let self = this
      this.$zDialog({
        content: ZDragPreview,
        props: {
          initData() {
            return self.data
          }
        },
        dialogProps: {
          title: '预览',
          width: '1200px',
          customClass: 'preview-dialog'
        }
      })
    }
  }
}
</script>
